<!--
 * @Author: your name
 * @Date: 2020-11-04 14:50:36
 * @LastEditTime: 2021-05-05 12:18:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\components\WsFooter.vue
-->
<template>
  <div class="ws-footer">
    <!-- // 路由模式下会匹配页面路径和标签的to属性，并自动选中对应的标签
    <van-tabbar route v-model="tabIndex">
      <van-tabbar-item
        v-for="(tabbar, index) in tabbars"
        :key="tabbar.name"
        :to="tabbar.path"
        :icon="tabbar.meta.icon"
        :class="{ 'van-tabbar-item-active': index === tabIndex }"
      >
        {{tabbar.meta.title}}
        <span class="badge" v-if="tabbar.name === 'Cart'">{{totalCount | over99}}</span>
      </van-tabbar-item>
    </van-tabbar> -->
    <van-tabbar v-model="tabIndex">
      <van-tabbar-item
        v-for="tabbar in tabbars"
        :key="tabbar.name"
        :to="tabbar.path"
        :icon="tabbar.meta.icon"
      >
        {{tabbar.meta.title}}
        <span class="badge" v-if="tabbar.name === 'Cart'">{{totalCount | over99}}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import routes from '@/router/routes'
export default {
  name: 'WsFooter',
  data () {
    return {
      tabIndex: 0
    }
  },
  computed: {
    ...mapGetters(['totalCount']),
    // 底部的导航是根据routes来渲染，而不固定，方便以后的维护升级
    tabbars () {
      return routes.filter(route => route.meta.isTabbar)
    }
  },
  created () {
    this.tabbars.forEach((tab, index) => {
      // tabIndex修改为当前路由所在的索引，不能默认为0，否则一刷新高亮回首页了
      // 从tabbars里面根据路由path去匹配修改tabIndex的默认值
      if (tab.path === '/' + this.$route.path.split('/')[1]) {
        this.tabIndex = index
      }
    })
  }
}
</script>

<style>
.van-tabbar-item {
  position: relative;
}
.badge {
position: absolute;
left: 45px;
top: 3px;
border-radius: 10px;
padding: 1px 4px;
background-color: crimson;
color: #fff;
}
</style>
